<template>
    <el-card class="mt">
        <div class="box">
            <div class="member_group_system">
                <h1 class="name">会员成长体系</h1>
                <div class="growth_level">
                    <span>当前成长值：{{ member_group_value }}/{{ target_group_value }}</span>
                    <span>距离下一等级：{{ target_group_value - member_group_value }}</span>
                </div>
                <div class="process-container">
                    <div class="process-bar" style="width: 10%;"></div>
                </div>
                <div class="level">
                    <div class="normal_member">
                        <el-icon style="background-color: #4b96ff;padding: 10px;border-radius: 50px;" color="#ffffff">
                            <User />
                        </el-icon>
                        <p>普通经营者</p>
                    </div>
                    <div class="normal_member">
                        <el-icon style="background-color: #ffb800;padding: 10px;border-radius: 50px;" color="#ffffff">
                            <User />
                        </el-icon>
                        <p>当前会员</p>
                    </div>
                    <div class="normal_member">
                        <el-icon style="background-color: #9d4edd;padding: 10px;border-radius: 50px;" color="#ffffff">
                            <User />
                        </el-icon>
                        <p>高级经验者</p>
                    </div>
                    <div class="normal_member">
                        <el-icon style="background-color: #0066CC;padding: 10px;border-radius: 50px;" color="#ffffff">
                            <User />
                        </el-icon>
                        <p>至尊经验者</p>
                    </div>
                </div>
            </div>
            <div class="gift" style="width: 250px;font-size: 20px;">
                <h1 class="mb">黄金经验者福利</h1>
                <el-row :gutter="20">
                    <!-- <el-col :span="8">
                        <el-tag size="large" type="primary">每月赠送一次充电</el-tag>
                    </el-col>
                    <el-col :span="8">
                        <el-tag size="large" type="success">充电满3小时立减5元</el-tag>
                    </el-col>
                    <el-col  :span="8">
                        <el-tag  size="large" type="warning">每月可以参与公司一次抽奖</el-tag>
                    </el-col> -->
                    <el-col :span="7" v-for="item in normal_data" :key="item.id">
                        <el-tag size="large" :type="item.type">{{ item.name }}</el-tag>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { defineProps, onMounted } from 'vue'
import { getNormalGiftList } from '@/api/recharge'
import { ref } from 'vue'
const props = defineProps({
    target_group_value: {
        type: Number,
        required: true
    },
    member_group_value: {
        type: Number,
        required: true
    },
    member_type: {
        type: Number,
        require: true
    }
})
/**
 * 1.普通经验者
 * 2.黄金经验者
 * 3.高级经验者
 * 4.至尊经验者
 */
interface normalType{
    id:number,
    member_number:number,
    type:string,
    name:string
}
const normal_data = ref<normalType[]>([])
onMounted(async () => {
    const { data } = await getNormalGiftList(1)
    normal_data.value = data.list
    console.log(normal_data.value)
})
</script>

<style scoped lang="less">
.box {
    display: flex;
}

.member_group_system {
    flex: 5;

    .growth_level {
        margin-top: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .level {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        text-align: center;

        p {
            font-weight: bold;
        }
    }
}

.gift {
    border-left: 1px solid gray;
    padding-left: 30px;
    margin-left: 20px;
    margin-right: 10px;
    flex: 5;
}

// 成长值设置
.process-container {
    width: 100%;
    height: 8px;
    background-color: #e5e9f2;
    border-radius: 5px;
    overflow: hidden;

    .process-bar {
        border-radius: 8px;
        height: 100%;
        background: linear-gradient(to right, #4285f4, #7b1fa2);
    }
}
</style>